<template>
	<view class="newclass">
		<view class="top">
		</view>
		<view class="content">
			<view class="classname">
				<view class="title">
					<Vsicon type="icon-tianxieziliao" size="20" color="#ff884d" margin="5"></Vsicon>
					班级名称</view>
				<view class="input-box">
					<input v-model="classInfo.classname" maxlength="30" class="input-name" placeholder="请输入班级名称"/>
					 <view class="text-shuoming">
						 场景：多个微信绑定一个孩子入群打卡练习，多人打卡算同一个孩子的打卡记录，
						 入群时需要填写孩子“姓名+关系”；例如小明的爸爸，小明的妈妈进群打卡，打卡内容都算是小明的打卡内容
					 </view>
				</view>
			</view>
			<view class="classname">
				<view class="title">
					<Vsicon type="icon-banjixinxi" size="20" margin="5" color="#ff4d4d"></Vsicon>
					班级年级
				</view>
				<view class="select-wrap">
					<view class="titlebox">
						<view :style="{'color':titleActive==index?'#ff9900':''}"
						 @click="fnClassSelect(index)" class="i-title" v-for="(item,index) in classes" :key="index">
							<Vsicon :type="item.icon" margin="3" size="20"></Vsicon>
							<view>{{item.title}}</view>
						</view>
					</view>
					<view class="itembox">
						<view 
						@click="fnItemclick(index)"
						:style="{'background':itemActive==index?'#fff3e5':'',
						border:itemActive==index?'1px solid #ff9933':'',
						color:itemActive==index?'#ff9933':''
						}"
						class="i-list" v-for="(item,index) in selectList" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
			<view class="classname">
				<view class="title">
					<Vsicon type="icon-shuben" size="20" color="#ff884d" margin="5"></Vsicon>
					科目 
				</view>
				<view class="kemulist">
					<view 
					:style="{'background':kemuActive==index?'#fff3e5':'',
					border:kemuActive==index?'1px solid #ff9933':'',
					color:kemuActive==index?'#ff9933':''
					}"
					@click="fnKlistClick(index)" class="k-item" v-for="(item,index) in kemuList" :key="index">
						{{item}}
					</view>
					<view 
					:style="{'background':kemuActive==4?'#fff3e5':'',
					border:kemuActive==4?'1px solid #ff9933':'',
					color:kemuActive==4?'#ff9933':''
					}"
					@click="fnInputClick"
					class="k-item"><input v-model="kemu" cursor-spacing="15" class="k-input" placeholder="自定义"/></view>
				</view>
			</view>
		</view>
		<view class="bottom">
			
			<button @click="fnBtnNavgateTo" class="btn">下一步</button>
		</view>
	</view>
</template>
<style>
	.icon {
	       width: 1em; height: 1em;
	       vertical-align: -0.15em;
	       fill: currentColor;
	       overflow: hidden;
	    }
</style>
<script>
	export default {
		data() {
			return {
				kemuActive:-1,
				titleActive:-1,
				itemActive:-1,
				selectList:[],
				kemu:'',
				classInfo:{
					type:'',
					classname:'',
					classlevel:'',
					banji:'',
					kemu:''
				},
				kemuList:["语文","数学","英语","艺术"],
				classes:[
					{
						title:'幼儿园',
						icon:'icon-shengdan-',
						list:["小班","中班","大班","3-6岁"]
					},
					{
						title:'小学',
						icon:'icon-shubao1',
						list:["一年级","二年级","三年级","四年级","五年级","六年级","1-6年级"]
					},
					{
						title:'中学',
						icon:'icon-dibudaohanglan-',
						list:["七年级","八年级","九年级","7-9年级"]
					},
					{
						title:'艺术',
						icon:'icon-yinle-leqi-music-instrume',
						list:["乐器","舞蹈","书法","绘画","综合"]
					}
				]
				
			}
		},
		mounted() {
			this.fnClassSelect(0)
		},
		methods: {
			fnKlistClick(index){
				this.kemuActive=index
				this.classInfo.kemu=this.kemuList[index]
			},
			fnInputClick(){
				this.kemuActive=4
			},
			fnClassSelect(index){
				this.titleActive=index
				this.selectList=this.classes[index].list
				this.classInfo.classlevel=this.classes[index].title
			},
			fnItemclick(index){
				this.itemActive=index
				this.classInfo.banji=this.selectList[index]
			},
			fnBtnNavgateTo(){
				if(this.kemuActive==4){
					this.classInfo.kemu=this.kemu
				}
				
				//console.log(this.classInfo)
				let info=this.classInfo
				if(info.classname==''){
					this.$fun.modal('班级名称不能为空!')
					return;
				}
				if(info.banji==''){
					this.$fun.modal('请选择学习班级！')
					return;
				}
				if(info.kemu==''){
					this.$fun.modal('请选择学习科目！')
					return;
				}
				
				this.$store.state.classInfo=this.classInfo
				uni.navigateTo({
				    url: '../classnext/classnext'
				});
			}
		}
	}
</script>

<style lang="scss">
	.newclass{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		//background-color: #007AFF;
		.top{
			width: 100%;
			height: 100px;
			background-color:$vx-bg-color ;
		}
		.bottom{
			width: 95%;
			max-width: 640px;
			//height: 30px;
			//height: 100px;
			position: absolute;
			bottom: 10px;
			//background: #007AFF;
			.btn{
				height: 45px;
				background: #FF9900;
				color: #fff;
				font-size: 16px;
				&:active{
					background-color: #ffa31a;
				}
			}
		}
		.content{
			width: 95%;
			max-width:$vx-max-page-width * 0.95;
			//height: 100%;
			position: absolute;
			//background-color: #2C405A;
			top: 20px;
			border-radius: 5px;
			.classname{
				//width: 100%;
				background-color: #fff;
				box-shadow: 0 0 5px #aaaaaa;
				border-radius: 5px;
				padding: 5px 5px 10px 5px;
				margin-bottom: 10px;
			
				.title{
					display: flex;
					align-items: center;
					//margin: 10px 0;
				}
				.input-box{
					padding: 0 10px;
					
					.text-shuoming{
						font-size: 14px;
						color: #aaa;
					}
					.input-name{
						//width: 100%;
						height: 35px;
						font-size: 16px;
						background-color: #fff3e5;
						color: #666;
						border-radius: 5px;
						padding: 0 10px;
						margin: 5px 0;
						border: 1px solid $vx-boder-color ;
						
					}
				}
				.kemulist{
					display: flex;
					flex-flow: row wrap;
					align-content: flex-start;
					color: #808080;
					.k-item{
						width:60px;
						height: 25px;
						padding: 3px;
						font-size: 14px;
						border: 1px solid #C0C0C0;
						margin: 5px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 5px;
						background-color: #fff;
						.k-input{
							//height: 20px;
						}
					}
				}
				
				.select-wrap{
					width: 100%;
					min-height: 120px;
					display: flex;
					//background-color: #007AFF;
					.titlebox{
						width: 80px;
						border-right: 1px solid #eee;
						//background-color: #4CD964;
						.i-title{
							display: flex;
							align-items: center;
							padding: 3px 0;
							font-size: 14px;
							color: #808080;
						}
					}
					.itembox{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						flex: 1;
						padding-left: 10px;
						color: #808080;
						align-content: flex-start;
						.i-list{
							width:60px;
							height: fit-content;
							padding: 3px;
							font-size: 14px;
							border: 1px solid #C0C0C0;
							margin: 3px;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 5px;
							background-color: #fff;
						}
					}
				}
				
			}
			
		}
	}
</style>
